<html>
<head lang="en">
    <title>门票</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategy.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <link rel="stylesheet" href="/css/bootstrap-select.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/plugins/bootstrap-select/bootstrap-select.js"></script>
    <script>
        var tabs = []; //记录当前标签页信息(当前页/总页数等)
        var currentTab; //当前查看的标签页信息

        //创建一个选项卡的方法
        function createTab(index, obj) {
            var a = $("<a class='nav-link' data-toggle='pill'></a>").attr("data-tid", obj.id)
                .attr("href", "#pills-" + obj.id).html(obj.name);
            return $("<li class='nav-item'></li>").attr("data-index", index).append(a);
        }


        $(function () {
            var user = JSON.parse(sessionStorage.getItem("user"));
            if(user){
            var userId = user.id;
            }
            //查询
            $.get("/scenicSpot", {pageSize: 6}, function (data) {
                //渲染攻略推荐
                $("#pills-top").renderValues(data,{
                    handle:function (ele,value) {
                        ele.dataset.scenicspotid=value;
                    }
                });
            });
            //选项卡动态绑定事件
            $("#pills-tab").on("click", "a[data-tid]", function () {
                //拿到当前标签页信息,从a标签的父元素li中取自定义index的属性值
                var index = $(this).closest("li").data("index");
                currentTab = tabs[index];
            });


            //渲染选项卡
            $.get("/regions", {"state": 1}, function (data) {
                $.each(data, function (index, ele) {
                    var tab = createTab(index, ele);
                    tab.appendTo("#pills-tab");
                    // 同步查询出对应标签页的内容
                    $.get("/scenicSpot/" + ele.id+"/region", function (data) {
                        $(data).appendTo("#pills-tabContent");
                        //为每个标签页存入信息
                        tabs[index] = {id: ele.id, currentPage: 1, pages: $(data).data("pages")};
                    }, "html");
                });
            });

            //设置窗口的滚到事件,用于翻页
            $(window).scroll(function () {
                if (isEnd()) {
                    if (currentTab) {
                        if (currentTab.currentPage < currentTab.pages) {
                            currentTab.currentPage++;
                            $.get("/scenicSpot/" + currentTab.id+"/region", {currentPage: currentTab.currentPage}, function (data) {
                                //把回显的内容渲染到对应的标签页中
                                $(data).appendTo("#pills-" + currentTab.id);
                            }, "html");
                        } else {
                            $(document).dialog({
                                type: "notice",
                                infoText: "已经到底部了",
                                autoClose: 1500,
                                position: "center"
                            });
                        }
                    }
                }
            })
            $(".searchBtn").change(function () {
                var keyword = $(this).val();
                // //通过省份名字去查询对应的景点信息
                $.get('/scenicSpot', {keyword: keyword}, function (data) {
                    $(".returnAll").click();
                    $("#pills-top").renderValues(data, {
                        handle: function (ele, value) {
                            ele.dataset.scenicspotid = value;
                        }
                    })
                })
            })
            $("#pills-tabContent").on("click", ".Pay", function () {
                $("#PayForm input").val("");
                var scenicSpotId = $(this).data("scenicspotid");
                if (user) {
                    //查询到指定id景点的值
                    var singlePrice;//单价
                    var number=1;//票数
                    var totalPrice;//总价
                    var type=1;//类型

                    $("#PayForm input[name='userId']").val(userId);
                    $("#PayForm input[name='number']").val(1);
                    $.get("/scenicSpot/" + scenicSpotId, function (data) {
                        $("#PayForm input[name='scenicSpot.name']").val(data.scenicSpotName);
                        $("#PayForm input[name='scenicSpot.id']").val(data.id);
                        $("#PayForm input[name='totalPrice']").val(data.ticket.price);
                        $("#PayForm input[name='validitydate']").val(data.ticket.date);
                        singlePrice = data.ticket.price;
                        totalPrice = singlePrice;
                    })
                    $("#payModal").modal('show');



                    
                    $("#PayForm input[name='number']").change(function () {
                            number = $(this).val();
                            if (type == 2) {
                                totalPrice = singlePrice * 0.5 * number;
                            } else if (type == 3) {
                                if (number > 10) {
                                    totalPrice = singlePrice * 0.9 * number;
                                }
                                else {
                                    $(document).dialog({
                                        closeBtnShow: true,
                                        autoClose: 6000,
                                        titleText: '温馨提示',
                                        content: '团队票购买数量需要大于10'
                                    })
                                    $("#PayForm select[name='type']").val("1");
                                    totalPrice = singlePrice * number;
                                }
                            }else {
                                totalPrice = singlePrice * number;
                            }
                            totalPrice.toFixed(0);
                        $("#PayForm input[name='totalPrice']").val(totalPrice);
                        }
                    )
                    $("#PayForm select[name='type']").change(function () {
                        type = $("#PayForm select[name='type'] option:selected").val();
                        if (type == 2) {
                            totalPrice = singlePrice * 0.5 * number;
                        } else if (type == 3) {
                            if (number > 10) {
                                totalPrice = singlePrice * 0.9 * number;
                            } else {
                                $(document).dialog({
                                  closeBtnShow: true,
                                  autoClose: 6000,
                                  titleText: '温馨提示',
                                  content: '团队票购买数量需要大于10'
                            })
                              $("#PayForm select[name='type']").val("1");
                              totalPrice=singlePrice*number;
                          }

                      }else if(type==1){
                          totalPrice=singlePrice*number;
                      }
                        totalPrice.toFixed(0);
                        $("#PayForm input[name='totalPrice']").val(totalPrice);
                    })

                }else{
                    $(document).dialog({
                        type : 'confirm',
                        closeBtnShow: false,
                        autoClose: 6000,
                        titleText: '温馨提示',
                        content: '请先登录',
                        buttonTextConfirm: '跳转到登录界面',
                        buttonTextCancel: '继续浏览',
                        onClickConfirmBtn: function(){
                            window.location.href="/login.html";
                        },
                    });
                }
            })

            $(".PaySubmit").click(function () {
                $.ajax({
                    type: 'POST',
                    url: "/users/"+userId+"/ticketDetails",
                    data: $("#PayForm").serialize(),
                    success: function () {
                        $(document).dialog({
                            type: "confirm",
                            style: "IOS",
                            titleShow: false,
                            content: "恭喜!购买成功!",
                            buttonTextConfirm: '跳转到订单界面',
                            buttonTextCancel: '看看其他',
                            onClickConfirmBtn: function(){
                                window.location.href="/mine/orders.html";
                            },
                            onClickCancelBtn : function(){

                                window.location.href="/index.html";
                            }

                        });
                    }
                });
            })


        })
    </script>


</head>
<body>
<div class="container">


    <!--进行查询-->
    <div class="search-head">
        <div class="row nav-search">
            <div class="col-2">
                <a href="index.html">
                    <span><i class="fa fa-chevron-left fa-2x"></i></span>
                </a>
            </div>

            <div class="col-10">
                <div class="input-group-sm search">
                    <input class="form-control searchBtn" placeholder="找城市" name="keyword">
                </div>
            </div>
        </div>
    </div>

    <ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab"
        role="tablist">
        <!--选项卡-->
        <li class="nav-item">
            <span style="font-weight: bold;">热门城市:</span><br/>
        </li>
        <li class="nav-item">
            <a class="nav-link active show" data-toggle="pill" href="#pills-top">
                <span  class="returnAll">不限</span>
            </a>
        </li>
        <!--<li class="nav-item" data-index="0"><a class="nav-link" data-toggle="pill" data-tid="1" href="#pills-1">杭州</a>-->
        <!--</li>-->
        <!--<li class="nav-item" data-index="1"><a class="nav-link" data-toggle="pill" data-tid="2" href="#pills-2">成都</a>-->
        <!--</li>-->
        <!--<li class="nav-item" data-index="2"><a class="nav-link" data-toggle="pill" data-tid="19"-->
        <!--href="#pills-19">北京</a></li>-->
        <!--<li class="nav-item" data-index="3"><a class="nav-link" data-toggle="pill" data-tid="22"-->
        <!--href="#pills-22">深圳</a></li>-->
    </ul>

    <!--<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab"-->
    <!--role="tablist">-->
    <!--&lt;!&ndash;选项卡&ndash;&gt;-->
    <!--<li class="nav-item">-->
    <!--<a class="nav-link active show" data-toggle="pill" href="#pills-top">-->
    <!--<span style="font-weight: bold;">主题</span>-->
    <!--</a>-->
    <!--</li>-->
    <!--<li class="nav-item" data-index="0"><a class="nav-link" data-toggle="pill" data-tid="1" href="#pills-11">山水田园</a>-->
    <!--</li>-->
    <!--<li class="nav-item" data-index="1"><a class="nav-link" data-toggle="pill" data-tid="2" href="#pills-2">宗教</a>-->
    <!--</li>-->
    <!--<li class="nav-item" data-index="2"><a class="nav-link" data-toggle="pill" data-tid="19"-->
    <!--href="#pills-19">美景</a></li>-->
    <!--<li class="nav-item" data-index="3"><a class="nav-link" data-toggle="pill" data-tid="22"-->
    <!--href="#pills-22">休闲</a></li>-->
    <!--</ul>-->
</div>


<!-- 选项卡对应的内容 -->
<div class="tab-content" id="pills-tabContent">
    <!-- 标签页的内容 -->
    <div class="tab-pane fade active show" id="pills-top">
        <div style="margin-bottom: 20px">
            <div class="container" render-loop="list">

                <div class="row news-detail">
                    <div class="col-5">
                        <img render-src="list.coverUrl" width="120%">
                    </div>
                    <div class="col-7">
                        <h4><span render-html="list.scenicSpotName"></span>
                            <small>[<span render-html="list.region.name"></span>]</small>
                        </h4>
                        <h3 class="text-right text-danger">￥:<span render-html="list.ticket.price"></span>元起</h3>
                    </div>

                    <div class="row news-detail">
                        <div class="col-7">
                            <p class="text-left text-muted">累计售票:50838张</p>
                            <p class="text-left text-muted">游客满意度：90%</p>
                            <p class="text-left text-muted">游客点评10166条</p>
                            <p class="text-left text-muted">广东省广州市增城区派潭镇高滩村温泉路2号 地图</p>
                        </div>
                        <div class="col-5">
                            <h5><a role="button" class="btn btn-success Pay" render-key="list.id" render-fun="handle"
                                   data-scenicspotid=''>点击购票</a></h5>
                        </div>

                    </div>
                    <hr>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="payModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title text-left">确认信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="#" method="post" id="PayForm">
                    <div class="form-group" >
                        <input type="hidden" name="userId">
                        <label class="col-lg-4 control-label">您要购买的门票为:</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" name="scenicSpot.name" readonly="readonly"/>
                            <input type="hidden" class="form-control" name="scenicSpot.id">
                        </div>
                    </div>
                    <div class="form-group" >
                        <label class="col-lg-4 control-label">有效期为:</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" name="validitydate" readonly="readonly"/>
                        </div>
                    </div>
                    <div class="form-group" >
                        <label class="col-lg-4 control-label">请选择购票张数:</label>
                        <div class="col-lg-6">
                            <input type="number" class="form-control" name="number" value="1"/>
                        </div>
                    </div>
                    <div class="form-group" >
                        <label class="col-lg-4 control-label">请选择购票类型:</label>
                        <div class="col-lg-6">
                            <select class="form-control" name="type">
                                <option value="1">正常票</option>
                                <option value="2">学生票</option>
                                <option value="3">团体票</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group" >
                        <label class="col-lg-4 control-label">总价格为:</label>
                        <div class="col-lg-6">
                            <input type="number" class="form-control" name="totalPrice" readonly="readonly"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary PaySubmit">跳转到支付页面</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>